<template>
	<view class="page">
		<comHead  :datas="datasObj">
			<template #headerContent>
				<!-- 固定位置 -->
				<view class="head pd-30" style="height: 200rpx; padding-bottom: 20rpx;">
					<view class="flex-bwt">
						<view class="flex cate-list">
							<view class="cate-name flex-center" :class="{ active: type == 1 }" @click="changeType(1)">
								优惠券
							</view>
							<view class="cate-name flex-center" :class="{ active: type == 2 }" @click="changeType(2)">
								返现券
							</view>
						</view>
						<view class="flex switch" v-if="type == 1" @click="changeTag">
							<view class="ft">{{ tag == 1 ? '按项目数' : '按优惠券数' }}</view>
							<image class="icon" mode="widthFix"
								src="https://cdn.oss.bon-top.cn/static_bc/images/coupon_icon1.png"></image>
						</view>
					</view>
					<view class="flex">
						<view class="filter-cate-name flex-center" v-for="(item, index) in tabArray" :key="index"
							:class="{ active: currentTab === index }" @click="selectTab(index)">
							{{ item.desc }}({{ item.num }})
						</view>
					</view>
				</view>
			</template>
		</comHead>
		<view class="pd-30" style="padding-top: 0;">
			<view class=" coupon-list" v-if="type == 1 && tag == 1">
				<view class="coupon-item" :class="{ 'is-del': item.isDel == 1, 'mt-20': index > 0 }"
					v-for="(item, index) in couponList" :key="item.id">
					<view @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" :data-index="index">
						<view class="quanItem flex">
							<view class="arrow">
								<view class="tip ft ft-20 flex-center c-ff">{{ item.preferential_name }}</view>
								<view class="mt-40 flex-center">
									<view>
										<view class="ft-num ft-32 text_center">{{ item.currency_symbol }}{{ item.reduce
										}}
										</view>
										<view class="ft ft-22 text_center">{{ item.type_name }}</view>
									</view>
								</view>
							</view>
							<view class="right pd-20 flex">
								<image class="expire-icon"
									src="https://cdn.oss.bon-top.cn/static_bc/images/expire_icon.png" mode="widthFix"
									v-if="item.status == 'is_expire' || item.status == 'is_del'"></image>
								<image class="expire-icon"
									src="https://cdn.oss.bon-top.cn/static_bc/images/used_icon.png" mode="widthFix"
									v-if="item.status == 'is_use'"></image>
								<view style="width: 100%;">
									<view class="ft fw-800">{{ item.txt }}</view>
									<view class="ft c-99 mt-20">{{ item.start_time }}~{{ item.end_time }}</view>
									<view class="flex-bwt mt-10">
										<view class="flex" @click="item.isOpen = item.isOpen == 1 ? 0 : 1">
											<view class="ft c-99">使用说明</view>
											<image class="down-icon" :class="{ active: item.isOpen == 1 }"
												mode="widthFix"
												src="https://cdn.oss.bon-top.cn/static_bc/images/up_down.png"></image>
										</view>
										<view class="flex-center c-ff ft btnA" @click="goDetail(item)"
											v-if="item.status == 'un_use'">去使用</view>
										<view class="flex-center c-ff ft btnA disable"
											v-else-if="item.status == 'is_use'">
											已使用
										</view>
										<view class="flex-center c-ff ft btnA disable"
											v-else-if="item.status == 'is_expire'">
											去使用</view>
										<view class="flex-center c-ff ft btnA disable"
											v-else-if="item.status == 'is_del'">
											已删除
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="des" v-if="item.isOpen == 1">
							<view class="des-item" v-for="(v, k) in item.des" :key="k">{{ k + 1 }}、{{ v }}</view>
						</view>
					</view>
					<view class="flex-center del-btn" v-if="item.isDel == 1" @click="delCoupon(item.id, index)">删除
					</view>
				</view>
				<view class="com-empty" v-if="couponList.length == 0">暂无数据</view>
			</view>
			<view class="product-list" v-if="type == 1 && tag == 2">
				<view class="product-item" :class="{ 'is-del': item.isDel == 1, 'mt-20': index > 0 }"
					v-for="(item, index) in couponList" :key="item.id">
					<view @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" :data-index="index">
						<view class="productItem pd-20">
							<image class="expire-icon" src="https://cdn.oss.bon-top.cn/static_bc/images/expire_icon.png"
								mode="widthFix" v-if="currentTab == 2"></image>
							<image class="expire-icon" src="https://cdn.oss.bon-top.cn/static_bc/images/used_icon.png"
								mode="widthFix" v-if="currentTab == 1"></image>

							<view class="flex">
								<view class="total ft flex-center">
									({{ item.countData.un_use_count + item.countData.use_count +
										item.countData.expire_count
									}})优惠券
								</view>
								<view class="ft-24 c-red ml-10">本单可减-￥{{ item.reduce_price }}</view>
							</view>
							<view class="flex mt-20">
								<view class="left" style="flex-shrink: 0;">
									<image style="border-radius: 40rpx;" class="img wh-100" mode="aspectFill"
										:src="item.cover">
									</image>
								</view>
								<view class="right ml-20">
									<view style="width: 488rpx;" class="ft-lue ft ft-28 fw-800">{{ item.name }}</view>
									<view style="width: 488rpx;" class="ft-lue ft c-99 mt-10"><template
											v-for="(tag, index) in item.tags" :key="index"><template
												v-if="index === item.tags.length - 1">{{ tag.name }}</template><template
												v-else> {{ tag.name + " | " }}</template>
										</template></view>
									<view class="flex-bwt mt-10">
										<view class="flex" style="align-items: flex-end;">
											<view class="ft fw-800">￥</view>
											<view class="ft-num fw-900">{{ item.new_price }}</view>
											<view class="ft fw-800">元/券后办理花费</view>
										</view>
										<view class="flex-center c-ff ft btnA" @click="goDetail(item)"
											v-if="currentTab == 0">
											去使用
										</view>
										<view class="flex-center c-ff ft btnA disable" v-else-if="currentTab == 1">已使用
										</view>
										<view class="flex-center c-ff ft btnA disable" v-else-if="currentTab == 2">去使用
										</view>
									</view>
								</view>
							</view>
							<view class="flex-bwt mt-20 b" @click="checkProduct(item.id)">
								<view class="ft">未使用({{ item.countData.un_use_count }}) |
									已使用({{ item.countData.use_count }}) | 已失效({{ item.countData.expire_count }}) </view>
								<image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"
									mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="flex-center del-btn" v-if="item.isDel == 1"
						@click="delCoupon(item.un_use_coupon_ids, index)">
						删除
					</view>
				</view>
				<view class="com-empty" v-if="couponList.length == 0">暂无数据</view>
			</view>
			<view class="coupon-list" v-if="type == 2">
				<view class="coupon-item" :class="{ 'mt-20': index > 0 }" v-for="(item, index) in couponList"
					:key="item.id">
					<view>
						<view class="quanItem flex">
							<view class="arrow">
								<view class="tip ft ft-20 flex-center c-ff">{{ item.preferential_name }}</view>
								<view class="mt-40 flex-center">
									<view>
										<view class="ft-num ft-32 text_center">{{ item.currency_symbol }}{{ item.reduce
										}}
										</view>
										<view class="ft ft-22 text_center">{{ item.type_name }}</view>
									</view>
								</view>
							</view>
							<view class="right pd-20 flex">
								<image class="expire-icon"
									src="https://cdn.oss.bon-top.cn/static_bc/images/expire_icon.png" mode="widthFix"
									v-if="item.status == 'is_expire' || item.status == 'is_del'"></image>
								<image class="expire-icon"
									src="https://cdn.oss.bon-top.cn/static_bc/images/used_icon.png" mode="widthFix"
									v-if="item.status == 'is_use'"></image>
								<view style="width: 100%;">
									<view class="ft fw-800">{{ item.txt }}</view>
									<view class="ft c-99 mt-20">
										{{ item.start_time }}{{ item.end_time ? '~' + item.end_time : '' }}</view>
									<view class="flex-bwt mt-10">
										<view class="flex" @click="item.isOpen = item.isOpen == 1 ? 0 : 1">
											<view class="ft c-99">使用说明</view>
											<image class="down-icon" :class="{ active: item.isOpen == 1 }"
												mode="widthFix"
												src="https://cdn.oss.bon-top.cn/static_bc/images/up_down.png"></image>
										</view>
										<template v-if="!item.cash_info">
											<view class="flex">
												<view class="flex-center ft btnB" @click="goCash(item.id)"
													v-if="item.status == 'un_use'">提现</view>
												<view class="flex-center c-ff ft btnA ml-10"
													@click="goOrderPay(item.order_id)" v-if="item.status == 'un_use'">
													去使用
												</view>
											</view>
										</template>
										<template v-if="item.cash_info">
											<view class="flex-center ft btnC" @click="goCashDetail(item.id)"
												v-if="item.cash_info.examine_status == 0">审核中 | 查看详情</view>
											<view class="flex-center ft btnC" @click="goCashDetail(item.id)"
												v-if="item.cash_info.examine_status == 1">成功 | 提现详情</view>
											<view class="flex-center ft c-red btnD" @click="goCashDetail(item.id)"
												v-if="item.cash_info.examine_status == 2">失败 | 查看详情</view>
										</template>
									</view>
								</view>
							</view>
						</view>
						<view class="des" v-if="item.isOpen == 1">
							<view class="des-item" v-for="(v, k) in item.des" :key="k">{{ k + 1 }}、{{ v }}</view>
						</view>
					</view>
				</view>
				<view class="com-empty" v-if="couponList.length == 0">暂无数据</view>
			</view>
			<view style="height: 68rpx;"></view>
		</view>
	</view>
</template>

<script setup lang="js">
import {
	ref,
	reactive
} from "vue";
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onLaunch,
	onLoad,
	onShow,
	onReachBottom
} from "@dcloudio/uni-app";

import comHead from '@/components/comHead.vue';
let datasObj = reactive({
	title: '优惠券',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
	height: 288
})

const type = ref(1)

const changeType = (id) => {
	type.value = id
	currentTab.value = 0
	isInit.value = 1
	reloadData()
}

const tabArray = ref([{
	desc: '未使用',
	num: 0
}, {
	desc: '已使用',
	num: 0
},
{
	desc: '已失效',
	num: 0
}
]);

const tag = ref(1)
const changeTag = () => {
	tag.value = tag.value == 1 ? 2 : 1
	isInit.value = 1
	reloadData()
}

const currentTab = ref(0);
const selectTab = (index) => {
	currentTab.value = index;
	reloadData()
};

const checkProduct = (id) => {
	uni.navigateTo({
		url: `/subpackage/userCoupon/product?id=${id}`,
	});
}


const reloadData = () => {
	couponPage.value = 1
	couponList.value = []
	couponLoading.value = true
	getCouponListData()
}

//获取列表
const couponPage = ref(1)
const couponList = ref([])
const couponLoading = ref(true)
const getCouponListData = () => {
	if (!couponLoading.value) {
		return
	}
	uni.showLoading()
	couponLoading.value = false
	if (type.value == 1) {
		utils
			.request(
				api.getCouponList, {
				page: couponPage.value,
				pageSize: 10,
				type: currentTab.value + 1,
				tag: tag.value
			},
				"get"
			)
			.then((res) => {
				if (isInit.value == 1) {
					tabArray.value[0].num = res.data.countData.un_use_count
					tabArray.value[1].num = res.data.countData.use_count
					tabArray.value[2].num = res.data.countData.expire_count
					isInit.value = 0
				}
				couponPage.value++
				if (res.data.items.length > 0) {
					couponList.value = couponList.value.concat(res.data.items)
				}
				if (couponPage.value <= res.data.pageInfo.totalPage) {
					couponLoading.value = true
				}
				uni.hideLoading()
			});
	} else if (type.value == 2) {
		utils
			.request(
				api.getCashbackList, {
				page: couponPage.value,
				pageSize: 10,
				type: currentTab.value + 1
			},
				"get"
			)
			.then((res) => {
				if (isInit.value == 1) {
					tabArray.value[0].num = res.data.countData.un_use_count
					tabArray.value[1].num = res.data.countData.use_count
					tabArray.value[2].num = res.data.countData.expire_count
					isInit.value = 0
				}
				couponPage.value++
				if (res.data.items.length > 0) {
					couponList.value = couponList.value.concat(res.data.items)
				}
				if (couponPage.value <= res.data.pageInfo.totalPage) {
					couponLoading.value = true
				}
				uni.hideLoading()
			});
	}
};
onReachBottom(() => {
	getCouponListData()
})

const isInit = ref(1)
onLoad((options) => {
	if (options.type) {
		type.value = options.type
	}
	getCouponListData()
})

const goDetail = (info) => {
	console.log('info', info)
	if (info.product_info) {
		uni.navigateTo({
			url: `/subpackage/immigration/immigration?id=${info.product_info.id}`,
		});
	} else if (info.cate == 2) {
		let url = '/pages/index/index'
		if (info.pack_type == 1) url = '/subpackage/teacher/teacher'
		if (info.pack_type == 4) url = '/subpackage/openVip/openVip'
		uni.navigateTo({
			url: url,
		})
	}
	else {
		uni.reLaunch({
			url: '/pages/index/index',
		})
	}
};

const delCoupon = (id, index) => {
	utils
		.request(
			api.deleteCoupon, {
			id: id
		},
			"post"
		)
		.then((res) => {
			reloadData()
			isInit.value = 1
			getCouponListData()
		});
}

const angle = (start, end) => {
	var _X = end.X - start.X,
		_Y = end.Y - start.Y
	//返回角度 /Math.atan()返回数字的反正切值
	return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
}

const startX = ref('')
const startY = ref('')
const touchStart = (e) => {
	if (currentTab.value != 0) {
		return
	}
	couponList.value.forEach((v, k) => {
		if (v.isTouchMove) {
			couponList.value[k].isTouchMove = false
		}
	})
	startX.value = e.changedTouches[0].clientX
	startY.value = e.changedTouches[0].clientY
}

const touchMove = (e) => {
	if (currentTab.value != 0) {
		return
	}
	var index = e.currentTarget.dataset.index
	const touchMoveX = e.changedTouches[0].clientX
	const touchMoveY = e.changedTouches[0].clientY
	const angleData = angle({
		X: startX.value,
		Y: startY.value
	}, {
		X: touchMoveX,
		Y: touchMoveY
	});
	couponList.value.forEach((v, k) => {
		couponList.value[k].isTouchMove = false
		//滑动超过30度角 return
		if (Math.abs(angleData) > 30) return;
		if (k == index) {
			if (touchMoveX > startX.value) //右滑
				couponList.value[k].isTouchMove = false
			else //左滑
				couponList.value[k].isTouchMove = true
		}
	})
}

const touchEnd = (e) => {
	if (currentTab.value != 0) {
		return
	}
	if (e.changedTouches.length == 1) {
		//手指移动结束后触摸点位置的X坐标
		var endX = e.changedTouches[0].clientX;
		//触摸开始与结束，手指移动的距离
		var disX = startX.value - endX;
		var delBtnWidth = 108;
		//如果距离小于删除按钮的1/2，不显示删除按钮
		var index = e.currentTarget.dataset.index;
		couponList.value[index].isDel = disX > delBtnWidth / 2 ? 1 : 0
	}
}

const goCash = (id) => {
	uni.navigateTo({
		url: `/subpackage/userCoupon/cash?id=${id}`,
	});
}

const goCashDetail = (id) => {
	uni.navigateTo({
		url: `/subpackage/userCoupon/cashDetail?id=${id}`,
	});
}

const goOrderPay = (orderId) => {
	//跳转到订单支付列表
	console.log(orderId, '11111111111111')
	uni.navigateTo({ url: '/subpackage/orderList/payList?order_id=' + orderId })
}
</script>

<style lang="scss" scoped>
.page {
	background: #FFFFFF;
}

.head {
	border-top: 2rpx solid #F1F1F1;

	.cate-name {
		background: #F8F8F8;
		border-radius: 20rpx;
		padding: 16rpx 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #666666;
		margin-right: 20rpx;
	}

	.cate-name.active {
		background: #DBF046;
		color: #333333;
	}

	.switch {
		background: linear-gradient(180deg, #FBFFDF 0%, #FFFFFF 100%);
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;

		.icon {
			margin-left: 4rpx;
			width: 22rpx;
			height: 22rpx;
		}
	}

	.filter-cate-name {
		margin-top: 20rpx;
		margin-right: 20rpx;
		padding: 12rpx 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 34rpx;
		border: 2rpx solid #F1F1F1;
		font-size: 24rpx;
		color: #666666;
	}

	.filter-cate-name.active {
		border: none;
		background: #333333;
		color: #FFFFFF;
	}
}

.coupon-list {
	.coupon-item {
		width: 690rpx;

		.quanItem {
			.arrow {
				width: 182rpx;
				height: 182rpx;
				background: linear-gradient(90deg, #dbf046 0%, #ffee7e 100%);
				border-radius: 20rpx;

				.tip {
					padding: 4rpx;
					width: fit-content;
					background: #333333;
					border-radius: 20rpx 8rpx 8rpx 8rpx;
				}
			}

			.right {
				width: 508rpx;
				height: 182rpx;
				background: #F8F8F8;
				border-radius: 20rpx;
				position: relative;

				.down-icon {
					width: 34rpx;
					height: 20rpx;
				}

				.down-icon.active {
					transform: rotate(180deg);
				}

				.btn {
					width: 88rpx;
					height: 54rpx;
					background: #dbf046;
					border-radius: 20rpx;
				}

				.btnA {
					width: 112rpx;
					height: 54rpx;
					background: #333333;
					border-radius: 20rpx;
				}

				.btnA.disable {
					background: #F1F1F1;
					color: #999999;
				}

				.btnB {
					width: 112rpx;
					height: 54rpx;
					background: #dbf046;
					color: #333333;
					border-radius: 20rpx;
				}

				.btnC {
					width: 228rpx;
					height: 54rpx;
					background: #DBF046;
					color: #333333;
					border-radius: 20rpx;
				}

				.btnD {
					width: 204rpx;
					height: 54rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
				}

				.expire-icon {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					width: 96rpx;
					height: 86rpx;
				}
			}
		}

		.des {
			width: 690rpx;
			padding: 40rpx 20rpx 20rpx;
			box-sizing: border-box;
			background: linear-gradient(180deg, rgba(248, 248, 248, 0) 0%, #F8F8F8 100%);
			border-radius: 20rpx;
			font-size: 22rpx;
			color: #999999;
			margin-top: -20rpx;
			word-break: break-all;
		}
	}

	.coupon-item.is-del {
		display: flex;
		align-items: stretch;
		margin-left: -108rpx;

		.del-btn {
			width: 88rpx;
			background: #FFF3EC;
			border-radius: 20rpx;
			margin-left: 20rpx;
			flex-shrink: 0;
			font-size: 24rpx;
			color: #9C0000;
		}
	}
}

.product-list {
	.product-item {
		width: 690rpx;

		.productItem {
			width: 690rpx;
			background: #F8F8F8;
			border-radius: 40rpx;
			position: relative;

			.total {
				background: linear-gradient(90deg, #DBF046 0%, #FFEE7E 100%);
				border-radius: 34rpx;
				padding: 12rpx 20rpx;
				box-sizing: border-box;
			}

			.left {
				width: 142rpx;
				height: 174rpx;
			}

			.btnA {
				width: 112rpx;
				height: 54rpx;
				background: #333333;
				border-radius: 20rpx;
			}

			.btnA.disable {
				background: #F1F1F1;
				color: #999999;
			}

			.expire-icon {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				width: 96rpx;
				height: 86rpx;
			}

			.b {
				padding: 12rpx 20rpx;
				box-sizing: border-box;
				background: #F1F1F1;
				border-radius: 34rpx;

				.icon {
					width: 20rpx;
					height: 34rpx;
					flex-shrink: 0;
				}
			}
		}
	}

	.product-item.is-del {
		display: flex;
		align-items: stretch;
		margin-left: -108rpx;

		.del-btn {
			width: 88rpx;
			background: #FFF3EC;
			border-radius: 20rpx;
			margin-left: 20rpx;
			flex-shrink: 0;
			font-size: 24rpx;
			color: #9C0000;
		}
	}
}
</style>